import React, { useEffect } from 'react'
import * as echarts from 'echarts'
import styles from './index.module.less'
import zhizhen from '@/resource/gauge/zhizhen.png'

export default function Gauge({ value }: any) {
    const borderStyle = {
        show: true,
        length: 3,
        distance: -20,
        lineStyle: {
            color: 'rgba(255,255,255,0.8)',
            width: 4,
            type: 'solid',
        },
    }
    const width = 12

    useEffect(() => {
        let chartDom: any = document.getElementById('main')
        let myChart = echarts.init(chartDom, {}, { devicePixelRatio: 2.5 })
        let option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%',
            },
            series: [
                {
                    animation: false,
                    type: 'gauge',
                    radius: '100%',
                    pointer: {
                        show: false,
                    },
                    center: ['50%', '60%'],
                    detail: {
                        color: '#171A1D',
                        fontSize: '24',
                        offsetCenter: [0, 0],
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: true,
                        itemStyle: {
                            color: '#fff',
                            borderRadius: width, // 设置圆角半径为width
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            width: width,
                            color: [[1, '#fff']],
                            borderRadius: width, // 设置圆角半径为width
                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                    splitLine: { show: false },
                    axisTick: { show: false },
                    data: [
                        {
                            value: 100,
                            name: '',
                        },
                    ],
                },

                {
                    type: 'gauge',
                    radius: '100%',
                    min: 12,
                    max: 75,
                    pointer: {
                        icon: `image://${zhizhen}`,
                        width: 111.67,
                        length: '110',
                        offsetCenter: ['0', '55'],
                        zlevel: 2,
                    },
                    center: ['50%', '60%'],
                    detail: {
                        color: '#171A1D',
                        fontSize: '24',
                        offsetCenter: [0, 0],
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: true,
                        itemStyle: {
                            color: '#ffde4c',
                            borderRadius: width, // 设置圆角半径为width
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            width: width,
                            color: [[1, '#fff']],
                            borderRadius: width, // 设置圆角半径为width
                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                    splitLine: borderStyle,
                    axisTick: borderStyle,
                    data: [
                        {
                            value,
                            name: '',
                            z: 10,
                        },
                    ],
                },
            ],
            graphic: {
                elements: [
                    {
                        type: 'text', // 绘制文本元素
                        left: 'center', // 文本元素左侧的位置
                        top: '52%', // 文本元素顶部的位置
                        style: {
                            text: value, // 文本内容
                            color: '#171A1D',
                            fontSize: '24',
                            z: 10,
                        },
                        textConfig: {
                            origin: 'center',
                        },
                        z: 10,
                    },
                ],
            },
        }

        option && myChart.setOption(option)
    }, [])

    return (
        <div className={styles.gauge_wrapper}>
            <canvas className={styles.gauge_canvas} id="main" style={{ width: '120vw', height: '60vw' }} />
        </div>
    )
}
